import { DatasetListItem } from '@/common';
import { SvgIcon } from '@/components/icon';
import { getBackground } from '@/utils/tree';
import { SearchOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { useEffect, useState } from 'react';

interface Props {
  datas: DatasetListItem[];
  selectedItem: DatasetListItem | undefined;
  onItemClicked?: (item: DatasetListItem) => void;
}
const ApiList = ({ datas, selectedItem, onItemClicked }: Props) => {
  const [searchValue, setSearchValue] = useState('');

  return (
    <>
      <div className="flex h-full flex-col rounded-lg p-2">
        <Input
          style={{ border: 'none', background: '#F5F7FB' }}
          placeholder="搜索..."
          className="mb-2 text-sm"
          value={searchValue}
          prefix={<SearchOutlined style={{ color: '#C9CEE2', marginRight: '10px' }} />}
          onChange={(e) => {
            setSearchValue(e.target.value);
          }}
        />
        <div className="h-full flex-1 overflow-y-auto overflow-x-hidden rounded-lg bg-[#F5F7FB]">
          {datas
            .filter((item) => item.name.includes(searchValue))
            .map((item, index) => {
              return (
                <div
                  key={index}
                  className={`flex cursor-pointer items-center self-center rounded-lg p-2 hover:bg-white ${selectedItem && selectedItem._id == item._id
                    ? 'bg-Gainsboro hover:bg-Gainsboro hover:opacity-80'
                    : ''
                    }`}
                  style={{ fontSize: '20' }}
                  onClick={() => {
                    onItemClicked && onItemClicked(item);
                  }}
                >
                  <div className="flex-shrink-0 items-center justify-center rounded-lg">
                    <SvgIcon
                      color="#33ADFF"
                      className="mb-2 ml-2 mr-2 mt-2"
                      icon="tdesign--folder-setting-filled"
                      size={32}
                    />
                  </div>
                  <div className="ml-2 items-center truncate">
                    <p className='truncate'>{item.name}</p>
                    <p className='truncate' style={{ fontSize: '12px' }}>{item.openapiUrl}</p>
                  </div>
                  <div className='flex flex-col'>
                    {/* <div className="ml-2 items-center truncate">{item.name}</div> */}
                    {/* <div className="ml-2 items-center truncate">{item.openapiUrl}</div> */}
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </>
  );
};

export default ApiList;
